<template>
  <div>css新增特性</div>
  <A>
    <div class="a">匿名插槽</div>
  </A>
   <div class="div">动态css</div>
   <div :class="[$style.font,$style.border]">module==$style</div>

</template>

<script lang="ts" setup>
import A from "./cssA.vue"
import { useCssModule } from "vue";
// 1、 deep() 样式穿透

// 2、 插槽选择器
// :slotted(.a) {
//      color: red;
// }   == 可以在子组件中修改插槽的样式

// 3、全局样式
// :global(div){color:red} 新增写法，最优


// 4、动态css
import { ref } from "vue";
let style = ref("red")
setTimeout(()=>{
  style.value = "pink"
},3000)

const css = useCssModule()
console.log("css",css);

</script>

<style scoped module>
.div {
  color:v-bind(style)
}
.font{
  font-size: 28px;
}
.border{
  border: 1px solid red;
}
</style>